<template>
	<!-- tabbar -->
	<view>
		<view class="" style="height: 128rpx;"> </view>
		<view class="tabbar">
			<!-- 首页 -->
			<view class="" @click="goIndex('/pages/merchant/index/index')">
				<image v-if="indexShow==true" class="icon" src="../../static/tab1/icon1.svg" mode=""></image>
				<image v-else class="icon" src="../../static/tab1/icon2.svg" mode=""></image>
				<view class="" :class="{'active':indexShow==true}">
					首页
				</view>
			</view>
			<!-- 分类 -->
			<view class="" @click="goIndex('/pages/merchant/order/order')">
				<image v-if="ddShow==true" class="icon" src="../../static/tab1/icon4.svg" mode=""></image>
				<image v-else class="icon" src="../../static/tab1/icon3.svg" mode=""></image>
				<view class="" :class="{'active':ddShow==true}">
					订单
				</view>
			</view>
			<view class="" @click="goIndex('/pages/merchant/sjreserved/sjreserved')" v-if="common.isyy==1">
				<image v-if="yyShow==true" class="icon" src="../../static/tab1/icon7.png" mode=""></image>
				<image v-else class="icon" src="../../static/tab1/icon8.png" mode=""></image>
				<view class="" :class="{'active':yyShow==true}">
					预约
				</view>
			</view>

			<!-- 我的 -->
			<view class="" @click="goIndex('/pages/merchant/my/my')">
				<image v-if="myShow==true" class="icon" src="../../static/tab1/icon6.svg" mode=""></image>
				<image v-else class="icon" src="../../static/tab1/icon5.svg" mode=""></image>
				<view class="" :class="{'active':myShow==true}">
					我的
				</view>
			</view>
			<!--返回 -->
			<view class="" @click="goIdx()">
				<image v-if="fhShow==true" class="icon" src="../../static/fh1.svg" mode=""></image>
				<image v-else class="icon" src="../../static/fh.svg" mode=""></image>
				<view class="" :class="{'active':fhShow==true}">
					返回
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "sjtabbar",
		props: {
			// 首页
			indexShow: {
				type: Boolean,
				default: false
			},
			// 课程
			ddShow: {
				type: Boolean,
				default: false
			},
			// 我都、的
			myShow: {
				type: Boolean,
				default: false
			},

			// 我都、的
			fhShow: {
				type: Boolean,
				default: false
			},
			// 预约
			yyShow: {
				type: Boolean,
				default: false
			},
			pagesPath: {
				type: String,
			}
		},
		data() {
			return {
				common: uni.getStorageSync('public')
			};
		},

		methods: {
			// 首页
			goIndex(url) {
				if (this.pagesPath !== url) {
					uni.redirectTo({
						url
					})
				}
			},
			goIdx() {
				uni.setStorageSync('option', 1)
				uni.setStorageSync('tableNumber', false)
				uni.setStorageSync('addAdish', false)
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		box-shadow: 0px -2rpx 12rpx 0px rgba(0, 0, 0, 0.12);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #2C2C36;
		font-size: 20rpx;
		padding-top: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
	}

	.icon {
		width: 42rpx;
		height: 43rpx;
		margin-bottom: 4rpx;
	}

	.active {
		color: #1C8FF5;
	}

	.tabcenter {
		width: 200rpx;
		height: 120rpx;
		margin-bottom: 50rpx;
		position: absolute;
		top: -38rpx;
		left: 280rpx;
	}
</style>